<!-- 订单进度 -->
<template>
    <div class="travel-order-progress" :style="{ 'height': (fullHeight - 117) + 'px' }">
        <div ref="dgtools" class="filter-container" style="padding: 5px;">
            <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList(1)">
                <el-form-item>
                    <el-input style="width: 210px" placeholder="客户姓名/客户电话（关键字查询）" v-model="dg.ps.routeLink">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 160px" placeholder="客户备注（关键字查询）" v-model="dg.ps.cusNote">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 160px" placeholder="酒店名字（关键字查询）" v-model="dg.ps.hotelName">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 145px" placeholder="航班号（关键字查询）" v-model="dg.ps.flightNum">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-select v-model="dg.ps.serviceMan" clearable :filterable="false" :placeholder="'业务员'"
                        style="width: 100px">
                        <el-option v-for="it in serviceManList" :key="it.baseUserId.uname" :label="it.baseUserId.realName"
                            :value="it.baseUserId.uname">
                            <span>{{ it.baseUserId.realName }}</span>
                            <span>{{ it.baseUserId.phone }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 70px" placeholder="座位数" maxlength="6" v-model="dg.ps.seats">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 70px" placeholder="人数" maxlength="6" v-model="dg.ps.customers">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-date-picker v-model="dg.ps.goTime" type="datetime" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" placeholder="选择出发时间" clearable style="width: 160px;">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-select v-model="dg.ps.hours" :placeholder="'前后间隔小时'" style="width: 90px">
                        <el-option v-for="it in hoursArr" :key="it.value" :label="it.label" :value="it.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click.native="getDgList(1)">搜索/刷新</el-button>

                <span class="tools-tj-data">
                    <label>总单数：</label><b>{{ dg.total }}单</b>
                    <el-divider direction="vertical"></el-divider>
                    <label>已完团：</label><b class="c-blue">{{ dg.tjData.alFinish }}单</b>
                    <el-divider direction="vertical"></el-divider>
                    <label>运行中：</label><b class="c-red">{{ dg.tjData.alTravel }}单</b>
                    <el-divider direction="vertical"></el-divider>
                    <label>未出行：</label><b class="c-green">{{ dg.tjData.notTravel }}单</b>
                </span>
            </el-form>
        </div>

        <div class="order-map-content" :style="{ 'height': (mapHeight) + 'px' }">
            <div class="order-list-ocstate" :style="{ 'display': 'block', 'left': alOcstate ? '300px' : '0px' }"
                :title="alOcstate ? '隐藏列表' : '显示列表'" @click="alOcstate = !alOcstate">
                <i :class="alOcstate ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
            </div>

            <div class="order-list-left" :style="{ 'width': alOcstate ? '300px' : '0px' }">
                <div class="order-list-container">
                    <div class="order-list-main box" v-infinite-scroll="getDgList" :infinite-scroll-immediate="false"
                        :infinite-scroll-disabled="noMore">
                        <ul>
                            <li v-if="dg.list.length == 0"><el-empty description="没有任何数据！"></el-empty></li>
                            <li v-for="(it, index) in dg.list" :key="index" @click="selAreaItem(it)"
                                :class="{ 'seled': curOrder && curOrder.id == it.id }" :id="'ol_' + it.id">
                                <i class="el-icon-place seled-icon" v-if="curOrder && curOrder.id == it.id"></i>

                                <div class="title">
                                    <b>{{ index + 1 }}</b>
                                    <span :style="{ 'color': getOrderState(it.status).color }">{{
                                        getOrderState(it.status).label }}</span>
                                </div>
                                <div><label>订单编号：</label>{{ it.orderNum }}</div>
                                <div><label>起 点：</label>{{ it.dayMps[0] && it.dayMps[0].spoint.address }}</div>
                                <div><label>终 点：</label>{{ it.dayMps[0] && it.dayMps[0].epoint.address }}</div>
                                <div><label>航班号：</label>{{ it.dayMps[0] && it.dayMps[0].routeStationInfo ?
                                    it.dayMps[0].routeStationInfo.num : '无' }}</div>
                                <!-- <div><label>客户信息：</label>{{it.carOrderBase.customId.baseUserId.realName}}（{{it.carOrderBase.customId.baseUserId.phone}}）</div> -->
                                <div><label>客户信息：</label>{{ it.carOrderBase.routeLink ?
                                    (`${it.carOrderBase.routeLink.split('-')[0]}（${it.carOrderBase.routeLink.split('-')[1]}）`)
                                    : '' }}</div>
                                <div>
                                    <label>车辆信息：</label>
                                    <span>{{ getDriverInfoText(it) }}</span>
                                    <!-- <template v-if="!it.disCarId">未派车 | 13982120863（平台调度应急电话）</template>
                                    <template v-else>
                                        <span v-if="it.disCarId.mainDriver">
                                           {{it.disCarId.plateNum}} | {{it.disCarId.mainDriver.realName}}-{{it.disCarId.mainDriver.phone}} | 13982120863（平台调度应急电话）
                                        </span>
                                        <span v-else>
                                            {{it.disCarId.plateNum}} | {{it.disCarId.outDriverInfo.split(',')[1]}}-{{it.disCarId.outDriverInfo.split(',')[0]}} | 13982120863（平台调度应急电话）
                                        </span>
                                    </template> -->
                                </div>
                                <div><label>客户备注：</label>{{ it.cusNote ? it.cusNote : '无' }}</div>
                            </li>
                            <li class="load-state" v-if="dg.list.length > 0">
                                <p v-if="noMore">已经到底啦~</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="myMap" :style="{ 'height': (mapHeight) + 'px' }"></div>

            <div class="order-detail-right" :style="{ 'width': '300px' }">
                <div class="order-list-container">
                    <div class="order-list-main box">
                        <ul>
                            <li v-if="!curOrder"><el-empty description="请选择一个订单！"></el-empty></li>
                            <li v-else>
                                <div class="title">
                                    <span :style="{ 'color': getOrderState(curOrder.status).color }">{{
                                        getOrderState(curOrder.status).label }}</span>
                                    <i class="track-explain el-icon-info" @click="trackExplain"><small>轨迹说明</small></i>
                                </div>
                                <div><label>起 点：</label>{{ curOrder.dayMps[0] && curOrder.dayMps[0].spoint.address }}</div>
                                <div><label>终 点：</label>{{ curOrder.dayMps[0] && curOrder.dayMps[0].epoint.address }}</div>
                                <div><label>航班号：</label>{{ curOrder.dayMps[0] && curOrder.dayMps[0].routeStationInfo ?
                                    curOrder.dayMps[0].routeStationInfo.num : '无' }}</div>
                                <!-- <div><label>客户信息：</label>{{curOrder.carOrderBase.customId.baseUserId.realName}}（{{curOrder.carOrderBase.customId.baseUserId.phone}}）</div> -->
                                <div><label>客户信息：</label>{{ curOrder.carOrderBase.routeLink ?
                                    (`${curOrder.carOrderBase.routeLink.split('-')[0]}（${curOrder.carOrderBase.routeLink.split('-')[1]}）`)
                                    : '' }}</div>
                                <div>
                                    <label>车辆信息：</label>
                                    <span>{{ getDriverInfoText(curOrder) }}</span>
                                    <!-- <template v-if="!curOrder.disCarId">未派车 | 13982120863（平台调度应急电话）</template>
                                    <template v-else>
                                        <span v-if="curOrder.disCarId.mainDriver">
                                           {{curOrder.disCarId.plateNum}} | {{curOrder.disCarId.mainDriver.realName}}-{{curOrder.disCarId.mainDriver.phone}} | 13982120863（平台调度应急电话）
                                        </span>
                                        <span v-else>
                                            {{curOrder.disCarId.plateNum}} | {{curOrder.disCarId.outDriverInfo.split(',')[1]}}-{{curOrder.disCarId.outDriverInfo.split(',')[0]}} | 13982120863（平台调度应急电话）
                                        </span>
                                    </template> -->
                                </div>
                                <div><label>客户备注：</label>{{ curOrder.cusNote ? curOrder.cusNote : '无' }}</div>
                            </li>
                            <li class="travel-order-progress-main">
                                <template v-if="orderProgressData.length > 0">
                                    <div class="surplus-container">
                                        <div class="surplus-info">
                                            <template v-if="surplusRouteProgress.time > 0">
                                                <span>剩余：{{ surplusRouteProgress.time }}分钟</span>
                                                <el-divider direction="vertical"></el-divider>
                                                <span>{{ surplusRouteProgress.distance }}公里</span>
                                            </template>
                                        </div>
                                        <el-button size="mini" @click.native="onSurplusRouteProgress">剩余行程</el-button>
                                    </div>

                                    <el-timeline :reverse="false">
                                        <el-timeline-item v-for="(it, index) in orderProgressData" :key="index"
                                            :timestamp="it.timestamp" :color="it.color">
                                            {{ it.content }}
                                        </el-timeline-item>
                                    </el-timeline>
                                </template>

                                <span v-else class="empty-data">暂无订单进度记录~</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

import * as request from "@/utils/request";

import * as commonSer from '@/api/services/travel/common.service';
import * as orderSer from '@/api/services/travel/order.service';

export default {
    data() {
        return {
            // 浏览器高度
            fullHeight: this.U.fullHeight(),
            // 地图的高度
            mapHeight: 0,
            // 地图对象
            myMap: null,

            // 区域列表-展开/隐藏状态
            alOcstate: false,
            // 搜索地址关键字
            searchKey: '',

            // 选中的订单
            curOrder: null,
            // 订单进度数据
            orderProgressData: [],
            // 订单轨迹点列表(二维数组)
            orderMapTrackList: [],
            // 订单剩余行程：时间和距离
            surplusRouteProgress: {
                // 耗时：分钟
                time: 0,
                // 距离：公里
                distance: 0,
            },

            dg: {
                // 列表数据
                list: [],
                // 列表总数
                total: 0,

                // 查询条件参数对象
                ps: {
                    page: 1, rows: 1000,
                    // 客户姓名/客户电话（关键字查询）
                    routeLink: '',
                    // 客户备注（关键字查询）
                    cusNote: '',
                    // 酒店名字
                    hotelName: '',
                    // 航班号
                    flightNum: '',
                    // 业务员uname（搜索并选择，显示姓名/手机号）
                    serviceMan: '',
                    // 座位数（输入查询，长度限制6位）
                    seats: '',
                    // 人数（输入查询，长度限制6位）
                    customers: '',
                    // 出发时间点（精确到分，默认当前时间点）
                    goTime: '',
                    // 前后？？小时：30分钟、60分钟、120分钟、180分钟、240分钟；（默认前后1小时）
                    hours: '',
                },
                // 统计显示参数对象
                tjData: {
                    // 已完团？单
                    alFinish: 0,
                    // 运行中？单
                    alTravel: 0,
                    // 未出行？单
                    notTravel: 0,
                }
            },

            // 业务员列表
            serviceManList: [],
            // 小时间隔数组
            hoursArr: [
                { label: '30分钟', value: 30 },
                { label: '60分钟', value: 60 },
                { label: '120分钟', value: 120 },
                { label: '180分钟', value: 180 },
                { label: '240分钟', value: 240 },
            ],
            // 订单状态
            statusArr: [
                { label: '未出行', value: 'NOT_DIS_CAR', color: '#008000' },
                { label: '未出行', value: 'JL_NOT_CONFIRM', color: '#008000' },
                { label: '未出行', value: 'DRIVER_NOT_CONFIRM', color: '#008000' },
                { label: '出行中', value: 'DRIVER_CONFIRMED', color: '#f00' },
                { label: '出行中', value: 'AL_TRAVEL', color: '#f00' },
                { label: '已完团', value: 'COMPLETED', color: '#2979ff' },
            ],

        }
    },
    computed: {
        // 没有更多了
        noMore: {
            get() {
                return this.dg.list.length >= this.dg.total;
            },
            set(newValue) {
                return newValue;
            }
        },
    },
    mounted() {
        const that = this;

        // 自适应地图高度
        that.mapHeight = that.fullHeight - 117 - that.$refs.dgtools.clientHeight;
    },
    created() {
        const that = this, U = that.U, C = that.C;

        // 出发时间：默认当前时间点
        that.dg.ps.goTime = U.date2str(new Date(), 'yyyy-MM-dd HH:mm');
        // 间隔小时：默认前后1小时
        that.dg.ps.hours = 60;
        window._AMapSecurityConfig = {
            securityJsCode: C.securityJsCode,
        }
        // 首次加载
        AMapLoader.load({
            key: C.amapJskey,
            version: '2.0',
            plugins: ['AMap.Driving'],
        }).then((AMap) => {
            // 初始化-地图对象
            that.myMap = new AMap.Map('myMap', { zoom: 10, center: [104.065861, 30.657401] });

            // 初始化-地图数据
            // that.getDgList(1); // （默认加载2次，滚动自动加载一次）
        }).catch(err => { console.log('高德地图加载失败：', err); });

        // 获取业务员列表
        that.getServiceManList();
    },
    methods: {
        // 获取业务员列表
        getServiceManList() {
            const that = this;

            commonSer.getServiceManList({}).then(res => {
                if (res.code == 1) that.serviceManList = res.data;
            });
        },
        // 获取-订单状态对应描述
        getOrderState(val) {
            const that = this;

            let statuArr = [
                { label: '未出行', value: 'NOT_DIS_CAR', color: '#008000' },
                { label: '未出行', value: 'JL_NOT_CONFIRM', color: '#008000' },
                { label: '未出行', value: 'DRIVER_NOT_CONFIRM', color: '#008000' },
                { label: '出行中', value: 'DRIVER_CONFIRMED', color: '#f00' },
                { label: '出行中', value: 'AL_TRAVEL', color: '#f00' },
                { label: '已完团', value: 'COMPLETED', color: '#2979ff' },
            ];

            let index = statuArr.findIndex(it => it.value == val);
            if (index != -1) {
                return statuArr[index];
            } else {
                return { label: '其他', value: '', color: '#555' };
            }
        },
        // 处理驾驶员显示文本
        getDriverInfoText(row) {
            const that = this;

            if (!row.disCarId) {
                return '未派车 | 13982120863（平台调度应急电话）';
            } else {
                // 今天开始时间
                let todayTime = that.$moment().startOf('days');
                // 订单完团时间（结束时间）
                let endTime = that.$moment(row.etime).startOf('days');

                if (row.disCarId.mainDriver) {
                    if (endTime.isBefore(todayTime)) {
                        // 订单完团时间在今天以前都不显示驾驶员手机号
                        return `${row.disCarId.plateNum} | ${row.disCarId.mainDriver.realName} | 13982120863（平台调度应急电话）`;
                    } else {
                        return `${row.disCarId.plateNum} | ${row.disCarId.mainDriver.realName}-${row.disCarId.mainDriver.phone} | 13982120863（平台调度应急电话）`;
                    }
                } else {
                    if (endTime.isBefore(todayTime)) {
                        // 订单完团时间在今天以前都不显示驾驶员手机号
                        return `${row.disCarId.plateNum} | ${row.disCarId.outDriverInfo ? row.disCarId.outDriverInfo.split(',')[1] : '无'} | 13982120863（平台调度应急电话）`;
                    } else {
                        return `${row.disCarId.plateNum} | (${row.disCarId.outDriverInfo ? (row.disCarId.outDriverInfo.split(',')[1] + '-' + row.disCarId.outDriverInfo.split(',')[0]) : '无'}) | 13982120863（平台调度应急电话）`;
                    }
                }
            }
        },

        // 获取-列表
        getDgList(page) {
            const that = this, U = that.U, ps = U.scopy(that.dg.ps);

            // 参数处理
            if (ps.goTime) {
                let goTime = U.str2date(ps.goTime);
                // 出发时间前后？小时的起止时间
                ps.startTime = U.date2str(new Date(goTime.getTime() - parseInt(ps.hours) * 1000 * 60));
                ps.endTime = U.date2str(new Date(goTime.getTime() + parseInt(ps.hours) * 1000 * 60));

                delete ps.goTime;
                delete ps.hours;
            }
            // 刷新
            if (page) ps.page = page;
            // 加载中，禁用无限加载，之后会根据数据条数来决定是否启用无限滚动
            this.noMore = true;
            orderSer.getProgressOrderPageList(ps).then(res => {
                if (res && res.code == 1) {
                    let list = res.data;

                    // 有数据则展开左侧订单列表
                    if (list.length > 0) that.alOcstate = true;

                    // 显示订单对应的地图标记
                    if (that.myMap) that.showOrderMarker(list);

                    // 第一页则清空一次
                    if (page == 1) that.dg.list = [];
                    // 追加（使用此方法消耗内存少）
                    that.dg.list.push.apply(that.dg.list, list);

                    that.dg.total = res.count;
                    that.dg.ps.page++;

                    // 统计数据显示
                    that.dg.tjData = { ...res.statics };
                }
            });
        },
        // 显示订单对应地图标记
        showOrderMarker(list) {
            const that = this, baseImgUrl = request.default.defaults.baseImgUrl, map = that.myMap;

            // 统计重复坐标，总数
            let lnglatMp = {}, c = 0;

            list.forEach(it => {
                // 无坐标点，则默认起点
                if (!it.currentLngLat) it.currentLngLat = it.dayMps[0].spoint.lngLat;

                if (it.currentLngLat) {
                    let is = lnglatMp[it.currentLngLat];
                    if (!is) {
                        lnglatMp[it.currentLngLat] = { ocount: 1, addr: it.dayMps[0].spoint.address };
                    } else {
                        lnglatMp[it.currentLngLat].ocount++;
                    }
                    c++;


                    // 标记图标
                    let markerIcon = '';
                    let status = that.statusArr.find(s => s.value == it.status);
                    if (status) {
                        if (status.label == '未出行') {
                            markerIcon = `${baseImgUrl}/kcbFiles/final/green-point.svg`;
                        } else if (status.label == '出行中') {
                            markerIcon = `${baseImgUrl}/kcbFiles/final/red-point.svg`;
                        } else if (status.label == '已完团') {
                            markerIcon = `${baseImgUrl}/kcbFiles/final/blue-point.svg`;
                        }
                    }

                    // 创建标记图标
                    // let icon = new AMap.Icon({
                    //     // 图标尺寸
                    //     size: new AMap.Size(30, 30),  
                    //     // Icon的图像  
                    //     image: markerIcon,  
                    //     // 图像相对展示区域的偏移量，适于雪碧图等
                    //     imageOffset: new AMap.Pixel(0, 0),  
                    //     // 根据所设置的大小拉伸或压缩图片
                    //     imageSize: new AMap.Size(30, 30)   
                    // });

                    // 订单标记坐标（此处应该是当前订单最新坐标：未出行：起点坐标；出行中：对应的坐标；已完团：完团时的坐标；）
                    let lnglat = it.currentLngLat.split(',');
                    let omarker = new AMap.Marker({
                        map: map,
                        // icon: icon,
                        icon: markerIcon,
                        position: [parseFloat(lnglat[0]), parseFloat(lnglat[1])],
                        // offset: new AMap.Pixel(0, 0),
                        offset: new AMap.Pixel(-20, -40),
                    });
                    // 给标记点绑定点击事件
                    omarker.on('click', function () {
                        that.selAreaItem(it);

                        // 列表滚动到对应项
                        that.$el.querySelector(`#ol_${it.id}`).scrollIntoView({
                            // 平滑过渡
                            behavior: 'smooth',
                            // 与最近的顶部或底部平齐。默认值，此处使用start会让地图高度升高，出现样式问题；
                            block: 'nearest'
                        });
                    });


                    // 解决标记遮挡问题
                    omarker.on("mouseover", function (e) {

                        e.target.setTop(true);
                    });
                    omarker.on("mouseout", function (e) {

                        e.target.setTop(false);
                    });
                } else {
                    console.log(`错误：订单${it.orderNum}无当前坐标点！`);
                }
            });

            console.log('总地点数：', c);
            console.log(lnglatMp);
        },

        // 清除所有订单轨迹
        clearAllOrderDriving() {
            const that = this, map = that.myMap;

            if (that.orderDriving) that.orderDriving.clear();

            // console.log('当前轨迹', that.orderWayTrack);
            // 清除所选订单途径轨迹
            if (that.orderWayTrack) {
                map.remove(that.orderWayTrack);
                that.orderWayTrack.destroy();
            }

            // debugger
            // let polist = map.getAllOverlays('polyline');
            // console.log('所有轨迹', polist);
            // polist.forEach(it => {
            //     map.remove(it);
            //     it.destroy();
            // });
        },

        // 设置-地图中心点
        setMapCenterMarker(o) {
            let that = this, map = that.myMap;

            // 坐标
            let lnglatArr = o.currentLngLat.split(',');
            // 坐标
            let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];

            // 起点地址
            let saddr = o.dayMps[0].spoint.address;
            // 终点地址
            let eaddr = o.dayMps[0].epoint.address;

            // 设置信息框对象（优先设置）<b>'+o.index+'</b>
            let winInfo =
                '<div class="cpoint-infowin">' +
                '<p class="ci-title">' + o.orderNum + '</p>' +
                '<p class="ci-addr">起点：' + saddr + '</p>' +
                '<p class="ci-addr">终点：' + eaddr + '</p>' +
                '</div>';
            let cwin = new AMap.InfoWindow({
                position: lnglat,
                offset: new AMap.Pixel(0, -40),
                content: '当前地点'
            });

            // 显示信息框
            cwin.setContent(winInfo);
            cwin.open(map, lnglat);

            // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
            map.panTo(lnglat); // 方法一
        },
        // 轨迹说明弹框
        trackExplain() {
            const that = this, U = that.U;

            U.qalert('驾车行程线路颜色说明：<span class="c-black">黑色-车辆（驾驶员）的轨迹；</span> <span class="c-sred">深红色-非常拥堵；</span> <span class="c-red">红色-拥堵；</span> <span class="c-yellow">黄色-行驶缓慢；</span> <span class="c-green">绿色-畅通；</span> <span class="c-blue">蓝色实线-没有路况信息；</span> <span  class="c-dblue">蓝色虚线-内部道路（含不可导航的航线）；</span> <span class="c-bbb">灰色实线-在建路段；</span> <span class="c-ccc">灰色虚线-车辆无法通行（人可以通行）道路；</span>', '特别说明');
        },
        // 地图显示订单轨迹
        showOrderTrackPoline() {
            const that = this, baseImgUrl = request.default.defaults.baseImgUrl, map = that.myMap, curOrder = that.curOrder, lineArr = that.orderMapTrackList;

            let slnglat = [parseFloat(curOrder.dayMps[0].spoint.lngLat.split(',')[0]), parseFloat(curOrder.dayMps[0].spoint.lngLat.split(',')[1])];
            let elnglat = [parseFloat(curOrder.dayMps[0].epoint.lngLat.split(',')[0]), parseFloat(curOrder.dayMps[0].epoint.lngLat.split(',')[1])];

            // 清除搜索订单驾车行程线路
            if (that.orderDriving) that.orderDriving.clear();
            // 构造路线导航类
            that.orderDriving = new AMap.Driving({ map: map });
            // 根据起终点经纬度规划驾车导航路线
            that.orderDriving.search(slnglat, elnglat,
                function (status, result) {
                    // result 即是对应的驾车导航信息
                    if (status === 'complete') {
                        // console.log('绘制驾车路线完成', result);
                    } else {
                        console.log('获取驾车数据失败：', result);
                    }
                }
            );

            // 清除所选订单途径轨迹
            if (that.orderWayTrack) {
                map.remove(that.orderWayTrack);
                that.orderWayTrack.destroy();
            }
            // 订单途径轨迹
            that.orderWayTrack = new AMap.Polyline({
                map: map,
                path: lineArr,
                showDir: true,
                // 线颜色 黑色
                strokeColor: "#000",
                // 线透明度  
                strokeOpacity: 0.9,
                // 线宽 
                strokeWeight: 8,
                // 线样式
                strokeStyle: "solid"
            });
        },

        // 显示-区域返回
        selAreaItem(o) {
            const that = this, U = that.U, map = that.myMap;

            if (o) {
                that.curOrder = o;

                // 选中当前区域，并显示标记及信息框
                that.setMapCenterMarker(o);

                // 清空进度数据
                that.orderProgressData = [];
                let ps = { orderNum: o.orderNum };
                orderSer.getOrderProgress(ps).then(res => {
                    if (res.code == 1) {
                        // 订单进度列表处理
                        let list = res.data;
                        list.forEach((it, i) => {
                            that.orderProgressData.push({
                                content: it.operNote.split('=')[0],
                                timestamp: U.datefmt(it.addTime, 'yyyy年MM月dd日 HH:mm'),
                                color: i == 0 ? '#2979ff' : '#bbb',
                            });
                        });

                        // 订单轨迹点列表
                        let plist = res.pointData;
                        // 清空订单轨迹点列表
                        that.orderMapTrackList = [];
                        plist.forEach(it => {
                            that.orderMapTrackList.push([it.lng, it.lat]);
                        });
                        // console.log('轨迹点二维数组：', that.orderMapTrackList);
                        // 地图显示订单轨迹
                        that.showOrderTrackPoline();
                    } else {
                        // 清除所有订单轨迹
                        // that.clearAllOrderDriving();

                        // 清空订单轨迹点列表
                        that.orderMapTrackList = [];
                        // 地图显示订单轨迹
                        that.showOrderTrackPoline();
                    }
                });
            }
        },
        // 剩余行程进度
        onSurplusRouteProgress() {
            const that = this, curOrder = that.curOrder;

            let ps = { orderNum: curOrder.orderNum };
            orderSer.getOrderSurplusProgress(ps).then(res => {
                if (res.code == 1) {
                    that.surplusRouteProgress = {
                        time: res.time,
                        distance: res.distance,
                    };
                } else {
                    that.U.qerror(res.msg);
                }
            });
        }



    }
}
</script>

<style lang="less" scoped>
.travel-order-progress {
    width: 100%;
    position: relative;

    .tools-tj-data {
        margin-left: 20px;

        label {
            font-size: 13px;
        }

        b {
            font-size: 12px;
        }
    }

    // 展开/隐藏-区域列表
    .order-list-ocstate {
        width: 15px;
        height: 80px;
        line-height: 80px;
        z-index: 9999;
        background: #15a3fa;
        position: absolute;
        top: 50%;
        left: 0px;
        transition: left 500ms linear;
        cursor: pointer;
        text-align: center;
        border-radius: 0px 5px 5px 0px;
        color: #fff;
    }

    .search-box {
        position: absolute;
        z-index: 5;
        width: 60%;
        left: 30%;
        top: 70px;
        height: 30px;

        .map-search-inp {

            ::v-deep .el-input__inner {
                width: 400px;
                font-size: 13px;
                border: 2px solid #30ccc1;
                color: #30ccc1;
                outline: none;
            }
        }

    }

    .order-map-content {
        display: flex;

        // 区域列表项
        .order-list-left,
        .order-detail-right {
            transition: width 500ms linear;

            .order-list-container {
                padding-top: 1px;
                padding-left: 5px;
                background: #f3f3f3;
                height: 100%;

                .order-list-tools {
                    .search-inp {
                        display: flex;
                        justify-content: flex-start;

                        input {
                            flex: 1;
                            height: 28px;
                            font-size: 13px;
                            border: 2px solid #30ccc1;
                            color: #30ccc1;
                            font-weight: 600;
                            padding: 0 8px;
                            outline: none;
                            margin-right: 5px;
                            border-radius: 3px;
                        }
                    }
                }

                .order-list-main::-webkit-scrollbar {
                    width: 5px !important;
                }

                .order-list-main {
                    width: 290px;
                    background: #ffffff;
                    height: 100%;
                    margin-top: 5px;
                    padding-top: 5px;
                    border-radius: 3px;
                    overflow-x: hidden;
                    overflow-y: auto;

                    ul {
                        margin: 0;
                        padding: 0;

                        .load-state {
                            padding: 0px;
                            text-align: center;

                            p {
                                margin: 0px;
                            }
                        }

                        li {
                            position: relative;
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            margin: 0 5px;
                            padding: 5px;
                            border-bottom: 1px solid #f3f3f3;
                            font-size: 12px;
                            line-height: 20px;
                            cursor: pointer;
                            padding-top: 20px;

                            .title {
                                position: absolute;
                                top: 0px;
                                left: 0px;

                                b {
                                    display: inline-block;
                                    padding: 0px 5px;
                                    background: #2979ff;
                                    color: #fff;
                                }

                                span {
                                    vertical-align: middle;
                                    font-weight: 600;
                                    padding-left: 5px;
                                    font-size: 13px;
                                    color: #555;
                                }
                            }

                            .seled-icon {
                                position: absolute;
                                top: 2px;
                                right: 5px;
                                color: #2979ff;
                                font-size: 20px;
                                cursor: default;
                            }

                            .ali-btns {
                                position: absolute;
                                bottom: 2px;
                                right: 0px;
                            }
                        }

                        li.seled {
                            background: #f3f3f3;
                        }
                    }
                }
            }
        }

        .order-detail-right ul li {
            cursor: default !important;

            &:last-child {
                padding-top: 0px !important;
            }

            &:first-child {
                padding-top: 20px !important;

                .title {
                    width: 100%;
                }

                .track-explain {
                    font-size: 18px;
                    position: absolute;
                    top: 1px;
                    right: 0px;
                    cursor: pointer;
                }
            }

            &.travel-order-progress-main {
                .empty-data {
                    color: #bbb;
                }

                .surplus-container {
                    z-index: 999;
                    display: flex;
                    justify-content: space-between;
                    padding-top: 5px;

                    .surplus-info {
                        line-height: 28px;
                        font-size: 12px;
                        color: #ff6300;
                    }

                    .el-button {
                        background: #2979ff;
                        color: #fff;
                        border-color: #2979ff;
                    }
                }
            }
        }

        #myMap {
            flex: 1;
            width: 100%;
            // 触控发生时不进行任何操作
            // touch-action: none;

            ::v-deep .cpoint-infowin {
                max-width: 300px;
                // padding-top: 15px;

                .ci-title {
                    margin: 0;
                    font-size: 16px;
                    color: #2979ff;
                    text-align: center;
                    font-weight: bold;

                    b {
                        background: #2979ff;
                        color: #fff;
                        font-weight: 600;
                        padding: 0px 5px;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                    }
                }

                .ci-addr {
                    margin: 0;
                    font-size: 13px;
                    color: #333;
                }

            }
        }
    }
}
</style>
